<template>
    <div class="panel">
        <div class="title">
            <el-tabs v-model="state.activeName" class="demo-tabs">
                <el-tab-pane v-for="item of state.tagList" :label="item.label" :name="item.name"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="content">
            <keep-alive>
                <component :is="personComponents.get(state.activeName)" :key="state.activeName"
                    :currentNode="currentNode"></component>
            </keep-alive>
        </div>
    </div>
</template>

<script setup lang="ts" name="personDetails">
import { ref, reactive, markRaw, defineAsyncComponent, onMounted } from 'vue'
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import { NextLoading } from '/@/utils/loading';
const route = useRoute();

const visible = ref<boolean>(false)

const state = reactive<any>({
    activeName: 'baseInfo',
    tagList: [{
        name: 'baseInfo',
        label: '基本信息'
    }, {
        name: 'personTag',
        label: '人员标签'
    }, {
        name: 'logger',
        label: '操作日志'
    }]
})

//相关组件
const personComponents = ref(new Map<string, any>())
//人员基本信息
personComponents.value.set(
    'baseInfo',
    markRaw(defineAsyncComponent(() => import('./components/BaseInfo/index.vue')))
)
//标签
personComponents.value.set(
    'personTag',
    markRaw(defineAsyncComponent(() => import('./components/PersonTag/index.vue')))
)
//日志
personComponents.value.set(
    'logger',
    markRaw(defineAsyncComponent(() => import('./components/Logger/index.vue')))
)

//地址树传过来的参数
const currentNode = ref<any>({})

//页面加载完执行，用来接收参数
onMounted(() => {
    const { id } = route.params;
    if (id) {
        currentNode.value = { id }
        visible.value = true;
    } else {
        ElMessage.error('获取人员ID失败');
        visible.value = false
    }
    // 页面加载时
    NextLoading.done();
})

</script>

<style lang="scss" scoped>
.panel {
    flex-direction: column;
    display: flex;
    width: 100%;
    height: 100%;
}

.title {
    padding-left: 12px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    font-size: 16px;
    border-bottom: 1px solid #efefef;
    justify-content: center;
    display: flex;
}

.content {
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.footer {
    display: flex;
    border-top: 1px solid #efefef;
    width: 100%;
    padding: 6px 6px;
    background-color: #fff;
    justify-content: center;
    align-items: center;
}

// :deep(.el-form) {
//     width: 100%
// }

.btn-close {
    position: absolute;
    right: 12px;
}
</style>